<template>
    <div class="accept-col">
        <el-row type="flex" justify="center">
            <el-col :span="12" class="steps-col">
                <el-steps :active="activeIndex" finish-status="success" align-center>
                    <el-step v-for="(v,i) in steps" :key="i" :title="v"></el-step>
                </el-steps>
            </el-col>
        </el-row>
        <slot name="opt-btns"></slot>
        <el-row>
            <emphasisTable :list="list1" 
                thTextAlign="center"
                thWidth="20%"
                tdWidth="80%" />
        </el-row>
        <el-row>
            <label>当前进度</label>
            <emphasisTable :list="list2" 
                thTextAlign="center"
                thWidth="2%"
                tdWidth="98%" />
        </el-row>
        <el-row>
            <emphasisTable :list="list3" 
                thTextAlign="center"
                thWidth="20%"
                tdWidth="80%" />
        </el-row>
    </div>
</template>
<style lang="less" scoped>
    .accept-col{
        .steps-col{
            height:65px;
            margin-top:30px;        
            /deep/.el-steps{
                .el-step{
                    .el-step__head{
                        .el-step__icon.is-text{
                            border-width: 1px;
                            .el-step__icon-inner{
                                font-size: 12px;
                            }
                        }
                        &.is-success{
                            .el-step__line{
                                background:#409EFF;
                            }
                        }
                        &.is-success,&.is-process{
                            color: #fff;
                            border-color: #409EFF;
                            .el-step__icon.is-text{
                                background: #0C82D7;
                                .el-step__icon-inner{
                                    color: #fff;
                                    font-weight: 400;
                                }
                            }
                        }
                    }
                    .el-step__main{
                        .el-step__title{
                            line-height: 35px;
                            &.is-success,&.is-process{
                                color: #409EFF;
                            } 
                        }                  
                    }
                }
                .el-step__title{
                    font-size: 14px;
                    font-weight: 400;
                    color: #666;
                }
            } 
        }
    }
</style>
<script>
import emphasisTable from '@/components/emphasisTable.vue'
/*
  activeIndex,完成的步骤下标
  steps，流程环节
  接受一个数组对象作为初始配置项，例如
  list: [{
    name: '名称', 必填
    text: '2000', 必填
    isHit: true, 可选。
    isUnderline: true, 可选。是否添加文字下划线
  }]
*/
export default {
    props:{
        activeIndex:{
            type:Number,
            default:0
        },
        steps:{
            type:Array,
            default:()=>['联系客服','线下评审','提交申请']
        },
        list1:{
            type:Array,
            required:true
        },
        list2:{
            type:Array,
            required:true
        },
        list3:{
            type:Array,
            required:true
        }
    },
    data() {
        return {
        }
    },
    components:{
        emphasisTable
    }
}
</script>